@import "../../assets/styles/variables";

.avatar {
  $self: &;
  border-radius: 50px;
  width: 45px;
  height: 45px;

  &--symbol {
    display: flex;
    justify-content: center;
    align-items: center;
    color: $white;
    text-align: center;
    font-weight: 600;
    font-size: 18px;
    user-select: none;
  }

  &__block {
    display: flex;

    &-item {
      display: flex;
    }

    &-delete {
      width: 20px;
      height: 20px;
      background-color: #7c7c7c7a;
      border-radius: 50%;
      position: absolute;
      margin: 9px 0 0 155px;
      background-image: url("../../assets/img/plus.svg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: 80%;
      rotate: 45deg;
    }

    &-delete:hover {
      transform: scale(1.5);
    }

    #{$self}__uploader {
      background-image: url("../../assets/img/plus.svg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: 80%;
      background-color: #7c7c7c7a;
      cursor: pointer;
      width: 55px;
      height: 55px;
      position: absolute;
      border-radius: 50%;
      margin: 155px 0 0 155px;

      input[type=file] {
        opacity: 0;
        display: block;
        width: 100%;
        height: 100%;
      }

      /* Focus */
      input[type=file]:focus + span {
        box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
      }
    }

    #{$self}__uploader:hover {
      transform: scale(1.1);
    }
  }
}